'use client';

import { useState } from 'react';
import { THEMES, Theme } from '@/lib/constants';
import { useTheme } from './ThemeProvider';

interface ThemeSelectorProps {
  className?: string;
}

export function ThemeSelector({ className = "" }: ThemeSelectorProps) {
  const { theme, setTheme } = useTheme();

  return (
    <div className={`bg-white dark:bg-gray-800 rounded-xl shadow-sm border border-gray-200 dark:border-gray-700 ${className}`}>
      <div className="p-4 border-b border-gray-200 dark:border-gray-700">
        <h3 className="text-lg font-semibold text-gray-900 dark:text-white">Theme Settings</h3>
        <p className="text-sm text-gray-600 dark:text-gray-400 mt-1">Choose your preferred interface theme</p>
      </div>

      <div className="p-4">
        <div className="grid grid-cols-1 gap-3">
          {THEMES.map((themeOption) => (
            <button
              key={themeOption.id}
              onClick={() => setTheme(themeOption.id as Theme)}
              className={`
                flex items-center gap-3 p-3 rounded-lg border transition-all
                ${theme === themeOption.id
                  ? 'border-blue-500 bg-blue-50 dark:bg-blue-900/20 ring-2 ring-blue-200 dark:ring-blue-800'
                  : 'border-gray-200 dark:border-gray-600 hover:border-gray-300 dark:hover:border-gray-500 hover:bg-gray-50 dark:hover:bg-gray-700'
                }
              `}
            >
              <div className="text-2xl">{themeOption.icon}</div>
              <div className="flex-1 text-left">
                <div className="font-medium text-gray-900 dark:text-white">{themeOption.name}</div>
                <div className="text-sm text-gray-600 dark:text-gray-400">{themeOption.description}</div>
              </div>
              {theme === themeOption.id && (
                <div className="w-5 h-5 bg-blue-500 rounded-full flex items-center justify-center">
                  <svg className="w-3 h-3 text-white" fill="currentColor" viewBox="0 0 20 20">
                    <path fillRule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clipRule="evenodd" />
                  </svg>
                </div>
              )}
            </button>
          ))}
        </div>
      </div>
    </div>
  );
}
